<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>结算单明细管理</title>
    <#include "/common/link.ftl">

    <script>
        $(function () {
            // 日期高级查询应该用让用户选择
            $('.input-date').datepicker({
                format: 'yyyy-mm-dd', //格式
                language: 'zh-CN', //中文
                autoclose: true,//选择后自动关闭
                //showMeridian:true, //是否显示上下午
                minView: 2,//精确到哪位
            });

            // 加号 按钮
            $('.btn-input').click(function () {
                $('#editModal').modal('show');
            });
            // 二级联动
            $('#category').change(function () {
                let value = $(this).val();
                var html = "<option value='-1'>请选择消费业务</option>";
                if (value == -1) {
                    $('#categoryItem').html(html);
                    return;
                }
                $.get('/systemDictionary/queryByParentId', {parentId: value}, function (data) {
                    $.each(data, function (index, item) {
                        html += "<option value=" + item.id + ">" + item.name + "</option>"
                    });
                    // 添加消费业务
                    $('#categoryItem').html(html);
                });
            });
            // 模态框保存异步提交表单
            $('.btn-submit').click(function () {
                $('#consumptionItemForm').ajaxSubmit(function (data) {
                    if (data.success) {
                        window.location.reload();
                    }
                })
            });
            // 后退按钮
            $('.btn-back').click(function () {
                window.location.href = "/consumption/list";
            });
            // 结算按钮
            $('.btn-consume').click(function () {
                let id = $(this).data('id');
                window.location.href = "/consumption/consume?id=" + id;
            });
            // 审核按钮
            $('.btn-audit').click(function () {
                let id = $(this).data('id');
                Swal.fire({
                    title: "是否审核完毕?",
                    text: "请选择审核类型",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: '归档',
                    cancelButtonText: '坏账'
                }).then((result) => {
                    if (result.value) {
                        // 确定之后 执行这里的代码 同步请求 携带id跳转
                        window.location.href = "/consumption/audit?id=" + id + "&status=" + 2;
                    } else {
                        window.location.href = "/consumption/audit?id=" + id + "&status=" + 3;
                    }
                });
            });


        })
    </script>
</head>
<body class="hold-transition skin-black sidebar-mini">
<div class="wrapper">
    <#include "/common/navbar.ftl">
    <!--菜单回显-->
    <#assign currentMenu="consumption"/>
    <#include "/common/menu.ftl">
    <div class="content-wrapper">
        <section class="content-header">
            <h1>结算单明细</h1>
        </section>
        <section class="content">
            <div class="box" style="padding: 10px;">
                <div class="box" style="border-top: none;">
                    <div class="box-header with-border">
                        <h3 class="box-title"><span class="glyphicon glyphicon-triangle-right"></span> 结算单明细</h3>
                    </div>
                    <div class="box-body no-padding">
                        <div class="mailbox-controls">
                            <div class="btn-group">
                                <#-- 新增 -->
                                <button type="button" class="btn btn-default btn-sm checkbox-toggle btn-input"><i
                                            class="fa fa-plus"></i></button>
                                <#-- 删除 -->
                                <button type="button" class="btn btn-default btn-sm"><i class="fa fa-trash-o"></i>
                                </button>
                            </div>
                        </div>
                        <div class="table-responsive mailbox-messages">
                            <table class="table table-hover table-striped">
                                <thead>
                                <tr>
                                    <th><input type="checkbox"></th>
                                    <th>业务大类</th>
                                    <th>业务小类</th>
                                    <th>结算类型</th>
                                    <th>消费金额(元)</th>
                                    <th>优惠金额(元)</th>
                                    <th>实收金额(元)</th>
                                </tr>
                                </thead>
                                <tbody>
                                <#-- 定义总金额和优惠金额-->
                                <#assign totalAmount = 0>
                                <#assign totalDiscountAmount = 0>
                                <#assign totalPayAmount = 0>
                                <#list items as item>
                                    <tr>
                                        <td><input type="checkbox"></td>
                                        <td>${(item.category.parentName)!}</td>
                                        <td>${(item.category.name)!}</td>
                                        <td>${(item.payType.name)!}</td>
                                        <td>${(item.amount)!}</td>
                                        <td>${(item.discountAmount)!}</td>
                                        <td>${(item.payAmount)!}</td>
                                    </tr>
                                <#-- 总金额和总优惠金额进行叠加-->
                                    <#assign totalAmount += item.amount>
                                    <#assign totalDiscountAmount += item.discountAmount>
                                    <#assign totalPayAmount += item.payAmount>
                                </#list>
                                </tbody>
                                <tfoot>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th>总消费金额:${totalAmount}元</th>
                                    <th>总优惠金额:${totalDiscountAmount}元</th>
                                    <th>总实收金额:${totalPayAmount}元</th>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                <br/>
                <div class="box" style="border-top: none;">
                    <div class="box-header with-border">
                        <h3 class="box-title"><span class="glyphicon glyphicon-triangle-right"></span> 结算单信息</h3>
                    </div>
                    <form class="box-body" class="form-horizontal" id="editForm" action="/consumption/saveOrUpdate"
                          method="post">
                        <input type="hidden" name="id" value="${consumption.id}">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>客户名称：</label>
                                    <input type="text" name="customerName" value="${consumption.customerName}"
                                           class="form-control" placeholder="请输入客户名称">
                                </div>
                                <div class="form-group">
                                    <label>客户电话：</label>
                                    <input type="text" class="form-control" name="customerTel"
                                           value="${consumption.customerTel}" placeholder="请输入客户电话">
                                </div>
                                <div class="form-group">
                                    <label>消费门店：</label>
                                    <select class="form-control" name="business.id">
                                        <option value="">请选择门店</option>
                                        <#list businesses as b>
                                            <option value="${b.id}">${b.name}</option>
                                        </#list>
                                    </select>
                                    <script>
                                        $("select[name='business.id']").val(${consumption.business.id})
                                    </script>
                                </div>
                                <div class="form-group">
                                    <label>进店时间：</label>
                                    <input type="text" class="form-control input-date" name="checkinTime"
                                           value="${(consumption.checkinTime?string('yyyy-MM-dd'))!}"
                                           autocomplete="off"
                                    >
                                </div>
                                <div class="form-group">
                                    <label>离店时间：</label>
                                    <input type="text" class="form-control input-date" name="checkoutTime"
                                           value="${(consumption.checkoutTime?string('yyyy-MM-dd'))!}"
                                           autocomplete="off"
                                    >
                                </div>
                                <div class="form-group">
                                    <label>车牌记录：</label>
                                    <input type="text" class="form-control" placeholder="请输入车牌记录"
                                           name="carLicence" value="${consumption.carLicence}">
                                </div>
                                <div class="form-group">
                                    <label>车型记录：</label>
                                    <input type="text" class="form-control" placeholder="请输入车型记录"
                                           name="carType" value="${consumption.carType}">
                                </div>

                                <div class="form-group">
                                    <label>结算单备注：</label>
                                    <textarea class="form-control" rows="4" name="info"
                                              placeholder="请输入结算单备注">${consumption.info}</textarea>
                                </div>
                                <div class="form-group">
                                    <label>结算单状态：</label>
                                    <input type="text" class="form-control" readonly
                                           value="${consumption.statusDisplay}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>总消费金额(元)：</label>
                                    <input type="text" class="form-control" placeholder="请输入总消费金额"
                                           name="totalAmount" value="${(totalAmount)!}">
                                </div>
                                <div class="form-group">
                                    <label>优惠金额(元)：</label>
                                    <input type="text" class="form-control" placeholder="请输入优惠金额"
                                           name="discountAmount" value="${(totalDiscountAmount)!}">
                                </div>
                                <div class="form-group">
                                    <label>实收金额(元)：</label>
                                    <input type="text" class="form-control" placeholder="请输入实收金额"
                                           name="payAmount" value="${(totalPayAmount)!}">
                                </div>
                                <div class="form-group">
                                    <label>结算单流水号：</label>
                                    <input type="text" class="form-control" readonly value="${consumption.cno}">
                                </div>
                                <div class="form-group">
                                    <label>关联预约单流水号：</label>
                                    <input type="text" class="form-control" readonly
                                           value="${consumption.appointmentAno}">
                                </div>
                                <div class="form-group">
                                    <label>创建时间：</label>
                                    <input type="text" class="form-control" readonly
                                           value="${(consumption.createTime?string('yyyy-MM-dd HH:mm:ss'))!}">
                                </div>

                                <div class="form-group">
                                    <label>结算时间：</label>
                                    <input type="text" readonly class="form-control"
                                           value="${(consumption.payTime?string('yyyy-MM-dd HH:mm:ss'))!}"/>
                                </div>
                                <div class="form-group">
                                    <label>结算人：</label>
                                    <input type="text" class="form-control" readonly
                                           value="${consumption.employee.name}">
                                </div>
                                <div class="form-group">
                                    <label>审核时间：</label>
                                    <input type="text" class="form-control" readonly
                                           value="${(consumption.auditTime?string('yyyy-MM-dd HH:mm:ss'))!}">
                                </div>
                                <div class="form-group">
                                    <label>审核人：</label>
                                    <input type="text" class="form-control" readonly
                                           value="${consumption.auditor.name}">
                                </div>
                            </div>
                        </div>

                        <div class="pull-right">
                            <#if consumption.status == 0>
                            <button type="submit" class="btn btn-primary btn-submit11"><span
                                        class="glyphicon glyphicon-book"></span> 保存
                            </button></#if>
                            <#if consumption.status == 0>
                            <button type="button" class="btn btn-warning btn-consume"
                                    data-id="${consumption.id}"
                            ><span
                                        class="glyphicon glyphicon-yen"></span> 结算
                            </button></#if>
                            <#if consumption.status == 1>
                            <button type="button" class="btn btn-success btn-audit"
                                    data-id="${consumption.id}"><span
                                        class="glyphicon glyphicon-flag"></span> 审核
                            </button></#if>
                            <button type="button" class="btn btn-danger btn-delete"
                                    data-url="/consumption/delete?id=${consumption.id}"><span
                                        class="glyphicon glyphicon-trash"></span> 删除
                            </button>
                            <button type="button" class="btn btn-default btn-back" data-dismiss="modal">后退</button>
                        </div>

                    </form>
                </div>
            </div>
        </section>
    </div>
    <#include "/common/footer.ftl">
</div>

<!--模态框-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">新增结算明细</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="consumptionItemForm" action="/consumptionItem/saveOrUpdate" method="post">
                <#-- 结算单流水号 -->
                <input type="hidden" name="cno" value="${consumption.cno}">
                <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">业务分类：</label>
                        <div class="col-sm-7">
                            <select class="form-control" id="category">
                                <option value="-1">请选择业务</option>
                                <#list category as b>
                                    <option value="${b.id}">${b.name}</option>
                                </#list>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">消费业务：</label>
                        <div class="col-sm-7">
                            <select class="form-control" id="categoryItem" name="category.id">
                                <option value="-1">请选择消费业务</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">结算类型：</label>
                        <div class="col-sm-7">
                            <select class="form-control" id="payType" name="payType.id">
                                <option value="-1">请选择结算类型</option>
                                <#list settlementType as i>
                                    <option value="${i.id}">${i.name}</option>
                                </#list>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">消费金额(元)：</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="amount"
                                   placeholder="请输入应收金额">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">优惠金额(元)：</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="discountAmount"
                                   placeholder="请输入优惠金额">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">实收金额(元)：</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="payAmount"
                                   placeholder="请输入实收金额">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-submit">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>


</body>
</html>
